<template>
  <div class="add-form">
    <el-form :model="formInfo"
             :rules='rules'
             class="inputBox"
             ref="formInfo"
             label-width="70px">
      <el-form-item label="用户名"
                    prop="addValue">
        <el-col :span="10">
          <el-input v-model="formInfo.addValue"
                    clearable></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="权限分配">
        <el-tree :data="treeList"
                 show-checkbox
                 ref="tree"
                 node-key="id"
                 :default-checked-keys="isstate=='edit' ? detailList.data.permissions:[]"
                 :props="defaultProps">
        </el-tree>
      </el-form-item>
      <br><br>
      <el-form-item class="bottomButton">
        <el-button type="primary"
                   @click="submitAdd">确定</el-button>
        <el-button @click="clean">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { list } from '../../api/base/menus'
import { add, update } from '../../api/base/permissions'
export default {
  name: 'usersAdd',
  props: {
    keyId: {
      type: [Object],
      require: true
    },
    detailList: {
      type: [Object, Array],
      require: true
    },
    isstate: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      form: {},
      rules: { addValue: [{ required: true, message: '请输入文章标题', trigger: 'blur' }] },
      addValue: null,
      formInfo: {
        addValue: this.isstate == 'edit' ? this.detailList.data.title : ''
      },
      defaultProps: {
        children: 'childs',
        label: 'title'
      },
      treeList: [],
      treeKey: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      let res = await list()
      //   console.log(res)
      let aa = res.data
      for (let i = 0; i < aa.length; i++) {
        if (aa[i].childs[0].points) {
          //   console.log(aa[i].childs[0])
          aa[i].childs[0] = {
            code: aa[i].childs[0].code,
            id: aa[i].childs[0].id,
            pid: aa[i].childs[0].pid,
            childs: aa[i].childs[0].points,
            title: aa[i].childs[0].title
          }
        }
      }
      this.treeList = aa
    },
    async submitAdd() {
      if (this.keyId.id) {
        await update({
          permissions: this.$refs.tree.getCheckedKeys(true),
          title: this.formInfo.addValue,
          id: this.keyId.id,
          create_date: this.keyId.create_date
        })
        this.$emit('close')
        this.$emit('updataList')
      } else {
        await add({
          permissions: this.$refs.tree.getCheckedKeys(true),
          title: this.formInfo.addValue
        })
        this.$emit('close')
        this.$emit('updataList')
      }
    },
    getCheckedKeys(val) {
      //   console.log(val)
    },
    clean() {
      this.$emit('close')
    },
    cleanPerAdd() {
      this.formInfo = {}
    }
  }
}
</script>

<style lang='less' scoped>
.inputBox {
  margin-left: 250px;
}
.bottomButton {
  position: absolute;
  right: 20px;
  bottom: 0;
}
</style>
